<template>
  <div ref="mapContainer" class="map-container"></div>
</template>

<script setup lang="ts">
import { ref, onMounted } from "vue";
import Map from "ol/Map";
import View from "ol/View";
import TileLayer from "ol/layer/Tile";
import OSM from "ol/source/OSM";
import { fromLonLat } from "ol/proj";
import { Vector as VectorLayer } from "ol/layer";
import { Vector as VectorSource } from "ol/source";
import { LineString } from "ol/geom";
import { Feature } from "ol";
import OLCesium from "ol-cesium";
import { Terrain } from "cesium";

const mapContainer = ref<HTMLElement | null>(null);

onMounted(() => {
  if (!mapContainer.value) return;

  // 创建 OpenLayers 地图
  const map = new Map({
    target: mapContainer.value,
    layers: [
      new TileLayer({
        source: new OSM(),
      }),
    ],
    view: new View({
      center: fromLonLat([118.7781, 32.0572]), // 南京的经纬度
      zoom: 2,
    }),
  });

  // 创建 OLCesium 实例
  const olCesium = new OLCesium({ map });
  const scene = olCesium.getCesiumScene();
  debugger;
  scene.terrainProvider = Terrain.fromWorldTerrain(); // 使用全球地形

  // 启用三维模式
  olCesium.setEnabled(true);

  // 定义边界线的坐标
  const boundaryCoords = [
    fromLonLat([-10, -10]),
    fromLonLat([10, -10]),
    fromLonLat([10, 10]),
    fromLonLat([-10, 10]),
    fromLonLat([-10, -10]),
  ];

  // 在 Cesium 中添加三维边界
  const cesiumPolygon = scene.primitives.add(
    new Cesium.PolylineVolumeGraphics({
      positions: Cesium.Cartesian3.fromDegreesArrayHeights([
        -10,
        -10,
        0, // 经纬度和高度
        10,
        -10,
        0,
        10,
        10,
        0,
        -10,
        10,
        0,
        -10,
        -10,
        0,
      ]),
      shape: [
        new Cesium.Cartesian2(-1, 0), // 定义边界的横截面形状
        new Cesium.Cartesian2(1, 0),
        new Cesium.Cartesian2(1, 50), // 边界的高度
        new Cesium.Cartesian2(-1, 50),
      ],
      material: Cesium.Color.RED.withAlpha(0.8), // 颜色
    })
  );
});

// import { ref, onMounted } from "vue";
// import Map from "ol/Map";
// import ImageLayer from "ol/layer/Image";
// import ImageStatic from "ol/source/ImageStatic";
// import View from "ol/View";
// import TileLayer from "ol/layer/Tile";
// import OSM from "ol/source/OSM";
// import XYZ from "ol/source/XYZ";
// import { fromLonLat } from "ol/proj";
// import { defaults as defaultControls } from "ol/control";
// import { defaults as defaultInteractions } from "ol/interaction";
// import { Projection } from "ol/proj";
// // 定义地图容器的引用
// const mapContainer = ref<HTMLElement | null>(null);

// const initMap = () => {
//   if (!mapContainer.value) return;
//   // 创建地图实例
//   // 定义图片的位置和范围（以经纬度表示）
//   const extent = fromLonLat([118.795949, 32.058283]).concat(
//     fromLonLat([118.295949, 32.758283])
//   );

//   // 创建图片图层
//   const imageLayer = new ImageLayer({
//     source: new ImageStatic({
//       url: "https://img2.baidu.com/it/u=2352701707,3390340869&fm=253&fmt=auto&app=120&f=JPEG?w=500&h=1083", // 图片 URL
//       imageExtent: extent, // 图片的坐标范围
//       // projection: "EPSG:4326", // 图片的坐标系
//     }),
//   });

//   const map = new Map({
//     target: mapContainer.value, // 绑定容器
//     layers: [
//       new TileLayer({
//         //默认地图
//         source: new OSM(),
//       }),
//       // new TileLayer({
//       //   //天地图路网
//       //   source: new XYZ({
//       //     url: "http://t4.tianditu.com/DataServer?T=vec_w&x={x}&y={y}&l={z}&tk=1e7492c90fe4240ec5b607de97f56e52",
//       //   }),
//       // }),
//     ],
//     controls: defaultControls({
//       attribution: false, //去除版权信息
//       rotate: true, //展示旋转控件
//       zoom: true, //展示缩放控件
//     }), //地图控件
//     pixelRatio: window.devicePixelRatio, //屏幕像素比
//     interactions: defaultInteractions({
//       altShiftDragRotate: true, //鼠标滚轮缩放
//       pinchRotate: true, //触摸旋转
//       doubleClickZoom: true, //双击缩放
//       dragPan: true, //拖拽平移
//       keyboard: true, //键盘操作
//     }), //默认交互
//     maxTilesLoading: 16, //最大加载瓦片数
//     moveTolerance: 1, //移动容差
//     view: new View({
//       center: fromLonLat([118.795949, 32.058283]), // 中心点坐标（转换为 OpenLayers 的坐标系）
//       zoom: 8, // 初始缩放级别
//     }),
//   });
//   map.addLayer(imageLayer);
//   map.getView().fit(extent);
//   // map.on("changed",(event)=>{
//   //map对象的属性只要改变，就会修改对象的版本号，版本号变化了此事件就会触发
//   // })
//   // 监听图层组变化
//   map.on("change:layergroup", (event) => {
//     console.log("图例变化", event);
//   });
//   //view事件
//   map.on("change:view", (event) => {
//     console.log("view", event);
//   });
//   //size事件
//   map.on("change:size", (event) => {
//     console.log("size", event);
//   });

//   map.on("singleclick", (event) => {
//     console.log("单击", event);
//   });
//   // map.on("click", (event) => {
//   //   console.log("双击", event);
//   // });
//   map.on("error", (event) => {
//     // console.log("错误", event);
//   });
//   map.on("movestart", (event) => {
//     // console.log("移动开始", event);
//   });
//   map.on("moveend", (event) => {
//     // console.log("移动结束", event);
//   });
//   map.on("precompose", (event) => {
//     //渲染图层之前触发，没有设置上下文context
//     // console.log("precompose", 1);
//   });
//   map.on("postcompose", (event) => {
//     //所有图层渲染完触发，没有设置上下文context
//     // console.log("postcompose", 2);
//   });
//   map.on("postrender", (event) => {
//     //地图渲染完成触发
//     // console.log("postrender", 3);
//   });

//   map.on("rendercomplete", (event) => {
//     //渲染完成时触发，即当前视口的所有源和图块都已完成加载，并且所有图块都淡入，事件对象没有上下文设置
//     // console.log("rendercomplete", event);
//   });
//   //属性监听
//   map.on("propertychange", (event) => {
//     console.log("属性监听", event);
//   });
//   console.log("map", map);
//   map.set("aa", "aa");
//   map.setProperties({
//     bb: "bb",
//   });
// };

// onMounted(() => {
//   initMap();
// });
</script>

<style scoped>
.map-container {
  width: 100%;
  height: 100vh;
}
</style>
